.quickStartContainer {
  padding: 0;
  background: #0a0a0a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    padding: 24px;
    border-bottom: 1px solid #333;
    background: #1a1a1a;
    
    h1 {
      color: #00ff00;
      margin: 0 0 12px 0;
      font-size: 28px;
      font-weight: 600;
    }
    
    p {
      color: #e6e6e6;
      margin: 0;
      font-size: 16px;
      line-height: 1.5;
    }
  }

  .iframeContainer {
    flex: 1;
    position: relative;
    background: #fff;
    
    .embeddedFrame {
      width: 100%;
      height: calc(100vh - 140px);
      border: none;
      background: #fff;
    }
  }

  .footer {
    padding: 16px 24px;
    background: #1a1a1a;
    border-top: 1px solid #333;
    text-align: center;
    
    p {
      color: #999;
      margin: 0;
      font-size: 14px;
    }
    
    .directLink {
      color: #00ff00;
      text-decoration: none;
      margin-left: 8px;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .quickStartContainer {
    .header {
      padding: 16px;
      
      h1 {
        font-size: 24px;
      }
      
      p {
        font-size: 14px;
      }
    }
    
    .iframeContainer {
      .embeddedFrame {
        height: calc(100vh - 120px);
      }
    }
    
    .footer {
      padding: 12px 16px;
      
      p {
        font-size: 12px;
      }
    }
  }
}